
/**
 * This function does everything, that needs to be done
 * with hyperlink, if it leads to an image. 
 */
function processImage(/*Element*/ link, /*Element*/ message)
{
    var url = link.getAttribute("href");           

    // if the link doesn't lead to an image we're done.
    if (leadsToImage(url)) 
    {

        var span = document.createElement("div");
        var blank1 = document.createTextNode(" ");
        var blank2 = document.createTextNode(" ");

        span.innerHTML = "<br /><br />";

        span.message = message;
        span.url = url;

        insertAfter(blank1, link);
        insertAfter(span, blank1);
        insertAfter(blank2, span);

        appendImage(span, span);
    }   
}

/**
 * Returns true if given url (in string) leads to an image.
 * Otherwise returns false.
 */
function leadsToImage(/*String*/ url)
{
    // image extensions
    var extensions = new Array("jpg", "jpeg", "png", "gif", "bmp", "tif", "tiff");
    
    for (var i = 0; i < extensions.length; i++) {   
	    var reg = new RegExp("^.*\\." + extensions[i] + "$");
	    if(reg.test(url))
	    {
	        return true;   
	    }
    }
    
    return false;
}


/**
 * Appends image to specified container and returns true on success.
 * False otherwise.
 */
function appendImage(/*Element*/ container, /*Element*/ viewElement)
{
    var content = viewElement.message.parentNode;
    // If there is no avatar, the content.cPadding is not set.
    var cPadding = (content.cPadding) ? content.cPadding : 0;
    
    var img = new Image();
    // width of the content block
    img.scaleWidth = content.clientWidth;
    if (img.scaleWidth < (cPadding + 1))
    {
        img.scaleWidth = content.offsetWidth;
    }    
    
    img.src = viewElement.url;
    img.scaleWidth -= cPadding;
    img.style.display = "none";
    img.className = "messImage";
    container.appendChild(img);
    
    if(img.scaleWidth < 1)
    {
        return false;
    }
    
    /*
     * If the image isn't complete yet. Its height and width are
     * set to 0 and 0. That means that we can't calculate the 
     * height based on the width. What we have to do is to wait 
     * before the image loads and then display it.
     */
    if(!img.complete)
    {
        showImageLoadingText(container, viewElement.embedID);
        if (img.attachEvent)
        {
            img.attachEvent("onload", img_onLoad);
        }
        else
        {
            img.onload = img_onLoad;
        }
    }
    else {
        showImage(img);    
    }
    
    return true;
}

/**
 * displays hidden image in its container.
 */
function showImage(/*Element*/ img)
{
    scaleImage(img);
    
    img.style.opacity = "0.0";
    img.style.filter = "alpha(opacity = 0)";
    img.style.display = "";
    
    fadeIn(img, 0.1);
    
}

/**
 * Scales given image based on its scaleWidth property
 */
function scaleImage(/*Element*/ img)
{
    // image has a border => we need to reduce the width a little
    img.scaleWidth -= 3;
    
    // this image scaling is "reduce only". We don't want to enlarge
    // small image, so if the image is smaller then its container, we'll return.
    if (img.width < img.scaleWidth || img.widht < 1)
    {
        return;
    }
    
    // We need to calculate the height using known width
    var newHeight = img.height * img.scaleWidth / img.width;
    
    img.style.width = img.scaleWidth.toString() + "px";
    img.style.height = Math.round(newHeight).toString() + "px";
}

/**
 * Handles the images onload event.
 */
function img_onLoad(/*Event*/ event)
{
    var img;
    if(event.srcElement){
        img = event.srcElement;
    }
    else {
        img = event.target;
    }
    
    // delete the loading message
    img.parentNode.removeChild(img.nextSibling);
    
    // show the image
    showImage(img);
}

function fadeIn (/*Image*/ image, /*Number*/ increment)
{
    var nextFadeStep = function ()
    {
       var opacity = parseFloat(image.style.opacity);
       opacity += increment;
       
       if (opacity >= 1.0)
       {
           opacity = 1;
       }
       image.style.opacity = opacity.toString();
       opacity *= 100;
       image.style.filter = "alpha(opacity = " + opacity.toString() + ")";
       
       if (opacity == 100)
       {
            return;
       }
       
       setTimeout(nextFadeStep, 1000 / 25);    
    }
    setTimeout(nextFadeStep, 1000 / 25);
}

/**
 * Shows loading text in image area.
 */
function showImageLoadingText(/*Element*/ container)
{
    var loadDiv = document.createElement("div");
    loadDiv.style.margin = "20px auto 20px auto";
    loadDiv.style.fontWeight = "bold";
    loadDiv.appendChild(document.createTextNode("Loading..."));
    container.appendChild(loadDiv);
}





